<template>
  <view class="exam-analysis-container">
    <v-statusbar class="status-bar"></v-statusbar>

    <!-- 页面头部 -->
    <view class="header">
      <view class="header-left">
        <view class="back-btn" @click="navigateBack">
          <uni-icons type="left" size="24"></uni-icons>
        </view>
        <view class="page-title">AI可视化考情分析</view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 数据概览卡片 -->
      <view class="overview-card">
        <view class="overview-title">学习进度概览</view>
        <view class="overview-stats">
          <view class="stat-item">
            <view class="stat-value">{{ examCount }}</view>
            <view class="stat-label">总考试次数</view>
          </view>
          <view class="stat-item">
            <view class="stat-value">{{ studyCount }}</view>
            <view class="stat-label">总学习次数</view>
          </view>
        </view>
      </view>

      <!-- 成绩趋势图 -->
      <view class="chart-card">
        <view class="chart-title">成绩趋势(近十次)</view>
        <view class="chart-container">
          <!-- 加载状态 -->
          <view v-if="isLoadingRate" class="chart-placeholder">
            <image src="/static/image/analyze.png" mode="aspectFit"></image>
            <text>成绩趋势图表加载中...</text>
          </view>
          <!-- 图表容器 -->
          <view v-else class="charts-box">
            <qiun-data-charts type="line" :opts="opts" :chartData="chartData" canvas2d />
          </view>
        </view>
      </view>

      <!-- 学习建议 -->
      <view class="suggestion-card" v-if="chartData && chartData.categories && chartData.categories.length > 0">
        <view class="card-title">AI学习建议</view>
        <view class="suggestion-content">
          <!-- 加载状态显示 -->
          <view v-if="isLoading" class="loading-state">
            <text class="loading-text">AI分析中...</text>
          </view>
          <!-- 实际建议显示 -->
          <view v-else-if="suggestions && suggestions.length > 0">
            <view class="suggestion-item" v-for="(item, index) in suggestions" :key="index">
              <view class="suggestion-icon-wrapper">
                <uni-icons type="circle" size="16" class="suggestion-icon" color="#476bff"></uni-icons>
              </view>
              <text>{{ item }}</text>
            </view>
          </view>
          <!-- 无数据状态 -->
          <view v-else class="empty-state">
            <text>暂无学习建议</text>
          </view>
        </view>
      </view>

      <!-- 图表数据为空时的提示 -->
      <view class="suggestion-card" v-else>
        <view class="card-title">AI学习建议</view>
        <view class="suggestion-content">
          <view class="empty-state">
            <text>暂无成绩数据，无法生成学习建议与成绩趋势</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mixins from '@/mixins'

export default {
  mixins: [mixins],
  name: 'exam-analysis',
  data() {
    return {
      examCount: 0, // 总考试次数
      studyCount: 0, // 总学习次数
      suggestions: [], // 学习建议
      isLoading: false, // 加载状态
      isLoadingRate: false, // 成绩趋势加载状态
      chartData: {}, // 图表数据
      // 图表配置，参照示例样式
      opts: {
        color: ["#476bff"],
        padding: [15, 10, 0, 15],
        dataLabel: true,
        dataPointShape: true,
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          fontSize: "auto"  // 设置为0隐藏X轴标签文字
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          fontSize: "auto", // 设置为0隐藏Y轴标签文字
          splitNumber: 5,
          data: [
            {
              min: 0,
              max: 100
            }
          ]
        },
        extra: {
          line: {
            type: "curve",
            width: 3,
            activeType: "hollow",
            linearType: "custom"
          }
        }
      }
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    // 初始化数据
    initData() {
      // 从服务器加载实际的考试数据
      this.loadExamData()
      // 加载成绩趋势数据
      this.loadExamRateData()
    },

    // 加载考试数据
    async loadExamData() {
      try {
        const res = await this.$axios.get('/api/study/exam/studyExam/xft/count')
        if (res) {
          this.examCount = res.examCount || 0
          this.studyCount = res.studyCount || 0
        }
      } catch (error) {
        console.error('加载考试数据失败:', error)
        this.showMessage.error('加载数据失败，请稍后重试')
      }
    },

    // 加载学习建议数据
    async loadStudyAdvice() {
      this.isLoading = true
      try {
        const res = await this.$axios.get('/ai/xft/advice/list')
        if (res) {
          this.suggestions = res
        }
      } catch (error) {
        console.error('加载学习建议失败:', error)
        this.showMessage.error('加载学习建议失败，请稍后重试')
      } finally {
        this.isLoading = false
      }
    },

    // 加载成绩趋势数据
    async loadExamRateData() {
      this.isLoadingRate = true
      try {
        const res = await this.$axios.get('/api/study/exam/studyExam/xft/rate')
        console.log(res);
        if (res && Array.isArray(res) && res.length > 0) {
          this.chartData = {
            categories: res.map(item => item.name),
            series: [
              {
                name: "成绩(%)",
                linearColor: [
                  [
                    0,
                    "#476bff"
                  ],
                  [
                    0.25,
                    "#5a7eff"
                  ],
                  [
                    0.5,
                    "#6c8cff"
                  ],
                  [
                    0.75,
                    "#7e9bff"
                  ],
                  [
                    1,
                    "#90aaff"
                  ]
                ],
                data: res.map(item => item.rate.toFixed(1))
              }
            ]
          }
          // 只有在有成绩数据时才加载学习建议
          this.loadStudyAdvice()
        } else {
          this.chartData = {
            categories: [],
            series: []
          }
        }
      } catch (error) {
        console.error('加载成绩趋势数据失败:', error)
        this.showMessage.error('加载成绩趋势数据失败，请稍后重试')
        // 出错时也设置空数据格式
        this.chartData = {
          categories: [],
          series: []
        }
      } finally {
        this.isLoadingRate = false
      }
    },

    // 返回上一页
    navigateBack() {
      this.toPage(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../basis.scss";

.exam-analysis-container {
  min-height: 100vh;
  background-color: #f8f9ff;

  .header {
    height: 100rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    padding: 0 30rpx;

    .header-left {
      display: flex;
      align-items: center;
      flex: 1;

      .back-btn {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
      }

      .page-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
    }
  }

  .content {
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    gap: 30rpx;
  }

  .overview-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .overview-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 30rpx;
    }

    .overview-stats {
      display: flex;
      justify-content: space-between;

      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;

        .stat-value {
          font-size: 40rpx;
          font-weight: bold;
          color: #476bff;
          margin-bottom: 10rpx;
        }

        .stat-label {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }

  .chart-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .chart-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 30rpx;
    }

    .chart-container {
      height: 300rpx;

      .chart-placeholder {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #999;

        image {
          width: 100rpx;
          height: 100rpx;
          margin-bottom: 20rpx;
          opacity: 0.5;
        }

        text {
          font-size: 24rpx;
        }
      }

      /* 图表容器样式，根据实际需求修改尺寸 */
      .charts-box {
        width: 100%;
        height: 100%;
      }
    }
  }

  .suggestion-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;

    // 添加装饰元素
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 6rpx;
      height: 100%;
      background: linear-gradient(to bottom, #476bff, #6c8cff);
    }

    .card-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 30rpx;
      padding-left: 20rpx;
    }

    .suggestion-content {
      display: flex;
      flex-direction: column;
      gap: 24rpx;
      padding-left: 10rpx;
    }

    .suggestion-item {
      display: flex;
      align-items: flex-start;
      padding: 16rpx 20rpx;
      border-radius: 12rpx;
      background-color: #f8faff;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      .suggestion-icon-wrapper {
        margin-right: 16rpx;
        margin-top: 8rpx;
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        background-color: rgba(71, 107, 255, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
      }

      .suggestion-icon {
        color: #476bff;
      }

      text {
        flex: 1;
        font-size: 24rpx;
        color: #444;
        line-height: 1.7;
        letter-spacing: 0.5rpx;
      }
    }
  }
}
</style>

// 加载状态样式
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60rpx 0;

.loading-text {
font-size: 28rpx;
color: #476bff;
}
}

// 无数据状态样式
.empty-state {
display: flex;
justify-content: center;
align-items: center;
padding: 80rpx 0;
color: #999;
font-size: 26rpx;
}